﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="menus.aspx.cs" Inherits="SampleSite.admin.menus" %>

<div>
    <table id="menus"></table>
</div>

<%-- 添加菜单 --%>
<div id="dlgAddMenu" class="easyui-dialog" style="width:330px;height:250px;padding:10px 20px"
		closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
    <form id="AddMenu" method="post">
        <table>
            <tr>
                <th colspan="2" >添加菜单</th>
            </tr>
            <tr>
                <td><label for="AppIdInAddMenu">应用：</label></td>
                <td>
                    <select class="easyui-combobox" id="AppIdInAddMenu" name="AppId" style="width:180px;"
                            data-options="required:true, valueField:'id', textField:'text', editable:false" />
                </td>
            </tr>                
            <tr>
                <td><label for="GroupIdInAddMenu">分组：</label></td>
                <td>
                    <select id="GroupIdInAddMenu" name="GroupId"  class="easyui-combobox" 
                            style="width:180px;"
                            data-options="required:true, valueField:'id', textField:'text', editable:false">
                    </select>
                </td>
            </tr>
            <tr>
                <td><label for="MenuNameInAddMenu">菜单名称:</label></td>
                <td><input class="easyui-validatebox" type="text" id="MenuNameInAddMenu" name="MenuName" 
                            style="width:175px;"
                            data-options="required:true,validType:'length[1,32]'" /></td>
            </tr>
            <tr>
                <td><label for="MenuUrlInAddMenu">URL地址:</label></td>
                <td><input class="easyui-validatebox" type="text" id="MenuUrlInAddMenu" name="MenuUrl"
                            style="width:175px;"
                            data-options="required:true,validType:'length[1,255]'" /></td>
            </tr>

            <tr>
                <td colspan="2" style="text-align:center; padding-top:10px">
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton" 
                        id="btnAddMenu" 
                        iconcls="icon-ok" >确定</a>
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton close_dlg"
                        dlg="dlgAddMenu"
                        iconcls="icon-cancel">关闭</a>
                </td>
            </tr>
        </table>
    </form>
</div>

<%-- 添加分组 --%>
<div id="dlgAddGroup" class="easyui-dialog" style="width:330px;height:250px;padding:10px 20px"
		closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
    <form id="AddGroup" method="post">
        <table>
            <tr>
                <th colspan="2" >添加分组</th>
            </tr>
            <tr>
                <td><label for="AppIdInAddGroup">应用：</label></td>
                <td>
                    <select class="easyui-combobox" id="AppIdInAddGroup" name="AppId" style="width:180px;"
                            data-options="required:true, valueField:'id', textField:'text', editable:false" />
                </td>
            </tr>                
            <tr>
                <td><label for="GroupNameInAddGroup">分组名称：</label></td>
                <td><input class="easyui-validatebox" type="text" id="GroupNameInAddGroup" name="GroupName" 
                            style="width:175px;"
                            data-options="required:true,validType:'length[1,32]'" /></td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center; padding-top:10px">
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton" 
                        id="btnAddGroup" 
                        iconcls="icon-ok" >确定</a>
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton close_dlg"
                        dlg="dlgAddGroup"
                        iconcls="icon-cancel">关闭</a>
                </td>
            </tr>
        </table>
    </form>
</div>

<%-- 修改菜单 --%>
<div id="dlgUpdateMenu" class="easyui-dialog" style="width:320px;height:230px;padding:10px 20px"
		closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
    <form id="UpdateMenu" method="post">
        <table>
            <tr>
                <th colspan="2" >添加菜单</th>
            </tr>
            <tr>
                <td><label for="AppIdInUpdateMenu">应用：</label></td>
                <td>
                    <select class="easyui-combobox" id="AppIdInUpdateMenu" name="AppId" 
                            style="width:180px;" readonly="true" disabled="disabled"
                            data-options="required:true, valueField:'id', textField:'text', editable:false" />
                </td>
            </tr>                
            <tr>
                <td><label for="GroupIdInUpdateMenu">分组：</label></td>
                <td>
                    <select id="GroupIdInUpdateMenu" name="GroupId"  class="easyui-combobox" 
                            style="width:180px;" readonly="true" disabled="disabled"
                            data-options="required:true, valueField:'id', textField:'text', editable:false">
                    </select>
                </td>
            </tr>
            <tr>
                <td><label for="MenuNameInUpdateMenu">菜单名称:</label></td>
                <td><input class="easyui-validatebox" type="text" id="MenuNameInUpdateMenu" name="MenuName" 
                            style="width:175px;"
                            data-options="required:true,validType:'length[1,32]'" /></td>
            </tr>
            <tr>
                <td><label for="MenuUrlInUpdateMenu">URL地址:</label></td>
                <td><input class="easyui-validatebox" type="text" id="MenuUrlInUpdateMenu" name="MenuUrl"
                            style="width:175px;"
                            data-options="required:true,validType:'length[1,255]'" /></td>
            </tr>

            <tr>
                <td colspan="2" style="text-align:center; padding-top:10px">
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton" 
                        id="btnUpdateMenu" 
                        iconcls="icon-ok" >确定</a>
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton close_dlg"
                        dlg="dlgUpdateMenu"
                        iconcls="icon-cancel">关闭</a>
                </td>
            </tr>
        </table>
        <input id="MenuIdInUpdateMenu" name="id" type="hidden" />
    </form>
</div>

<%-- 修改分组 --%>
<div id="dlgUpdateGroup" class="easyui-dialog" style="width:330px;height:250px;padding:10px 20px"
		closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
    <form id="UpdateGroup" method="post">
        <table>
            <tr>
                <th colspan="2" >修改分组</th>
            </tr>
            <tr>
                <td><label for="AppIdInUpdateGroup">应用：</label></td>
                <td>
                    <select class="easyui-combobox" id="AppIdInUpdateGroup" name="AppId" style="width:180px;"
                            readonly="true" disabled="disabled"
                            data-options="required:true, valueField:'id', textField:'text', editable:false" />
                </td>
            </tr>                
            <tr>
                <td><label for="GroupNameInUpdateGroup">分组名称：</label></td>
                <td><input class="easyui-validatebox" type="text" id="GroupNameInUpdateGroup" name="GroupName" 
                            style="width:175px;"
                            data-options="required:true,validType:'length[1,32]'" /></td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center; padding-top:10px">
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton" 
                        id="btnUpdateGroup" 
                        iconcls="icon-ok" >确定</a>
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton close_dlg"
                        dlg="dlgUpdateGroup"
                        iconcls="icon-cancel">关闭</a>
                </td>
            </tr>
        </table>
        <input id="GroupIdInUpdateGroup" name="Id" type="hidden" />
    </form>
</div>
    
<script type="text/javascript">
    var dlgAddGroup = {
        clearAddGroupDialog: function () {
            $('#AppIdInAddGroup').combobox('clear');
            $('#GroupNameInAddGroup').val('');
        },

        showAddGroupDialog: function () {
            dlgAddGroup.clearAddGroupDialog();
            $('#AppIdInAddGroup').combobox('reload', '/admin/ajax/combox/apps.ashx');
            $('#dlgAddGroup').dialog('open');
        },

        addGroup: function () {
            var validate = $('#AddGroup').form('validate');
            if (validate == false) {
                return false;
            }

            $.post('/admin/ajax/addModule.ashx', $('#AddGroup').serialize(), function (data) {
                if (data.state == 'ok') {
                    $.messager.alert('提示', '添加成功');

                    $('#dlgAddGroup').dialog('close');
                    $('#menus').treegrid('reload');
                }
                else {
                    $.messager.alert('提示', '添加失败');
                }
            }, 'json');
        },

        init: function () {
            $('#btnAddGroup').click(dlgAddGroup.addGroup);
            $('#dlgAddGroup').dialog({title: '添加分组'});
        }
    };
</script>
<script type="text/javascript">
    var dlgAddMenu = {
        clearAddMenuDialog: function () {
            $('#AppIdInAddMenu').combobox('clear');
            $('#GroupIdInAddMenu').combobox('clear');
            $('#AppIdInAddMenu').combobox('loadData', []);
            $('#GroupIdInAddMenu').combobox('loadData', []);
            $('#MenuNameInAddMenu').val('');
            $('#MenuUrlInAddMenu').val('');
        },

        showAddMenuDialog: function () {
            dlgAddMenu.clearAddMenuDialog();
            $('#AppIdInAddMenu').combobox('reload', '/admin/ajax/combox/apps.ashx');
            $('#dlgAddMenu').dialog('open');
        },

        addMenu: function () {
            var validate = $('#AddMenu').form('validate');
            if (validate == false)
                return false;

            $.post('/admin/ajax/addMenu.ashx', $('#AddMenu').serialize(), function (data) {
                if (data.state == 'ok') {
                    $.messager.alert('提示', '添加成功');

                    $('#dlgAddMenu').dialog('close');
                    $('#menus').treegrid('reload');
                }
                else {
                    $.messager.alert('提示', '添加失败');
                }
            }, 'json');
        },

        init: function () {
            $('#btnAddMenu').click(dlgAddMenu.addMenu);
            $('#dlgAddMenu').dialog({ title: '添加菜单' });
            $('#GroupIdInAddMenu').combobox({
                onBeforeLoad: function (param) {
                    param.AppId = $('#AppIdInAddMenu').combobox('getValue');
                }
            });
            $('#AppIdInAddMenu').combobox({
                onSelect: function (r) {
                    $('#GroupIdInAddMenu').combobox('reload', '/admin/ajax/combox/modules.ashx');
                }
            });
        }
    };
</script>
<script type="text/javascript">
    var dlgUpdateMenu = {
        clearUpdateMenuDialog: function () {
            $('#AppIdInUpdateMenu').combobox('clear');
            $('#GroupIdInUpdateMenu').combobox('clear');
            $('#AppIdInUpdateMenu').combobox('loadData', []);
            $('#GroupIdInUpdateMenu').combobox('loadData', []);
            $('#MenuNameInUpdateMenu').val('');
            $('#MenuUrlInUpdateMenu').val('');
            $('#MenuIdInUpdateMenu').val('');
        },

        showUpdateMenuDialog: function (row) {
            dlgUpdateMenu.clearUpdateMenuDialog();
            $('#AppIdInUpdateMenu').combobox('reload', '/admin/ajax/combox/apps.ashx');
                
            $('#MenuIdInUpdateMenu').val(row.id);
            $('#AppIdInUpdateMenu').combobox('select', row.app_id);
            $('#GroupIdInUpdateMenu').combobox('reload', '/admin/ajax/combox/modules.ashx');
            $('#GroupIdInUpdateMenu').combobox('select', row.group_id);
            $('#MenuNameInUpdateMenu').val(row.name);
            $('#MenuUrlInUpdateMenu').val(row.url);
                
            $('#dlgUpdateMenu').dialog('open');
        },

        updateMenu: function () {
            var validate = $('#UpdateMenu').form('validate');
            if (validate == false)
                return false;

            $.post(
                '/admin/ajax/updateMenu.ashx',
                $('#UpdateMenu').serialize(),
                function (data) {
                    if (data.state == 'ok') {
                        $.messager.alert('提示', '修改成功');

                        $('#dlgUpdateMenu').dialog('close');
                        $('#menus').treegrid('reload');
                    }
                    else {
                        $.messager.alert('提示', '修改失败');
                    }
                }, 'json');
        },

        init: function () {
            $('#btnUpdateMenu').click(dlgUpdateMenu.updateMenu);
            $('#dlgUpdateMenu').dialog({ title: '修改菜单' });
            $('#GroupIdInUpdateMenu').combobox({
                onBeforeLoad: function (param) {
                    param.AppId = $('#AppIdInUpdateMenu').combobox('getValue');
                }
            });
            $('#AppIdInUpdateMenu').combobox({
                onSelect: function (r) {
                    $('#GroupIdInUpdateMenu').combobox('reload', '/admin/ajax/combox/modules.ashx');
                }
            });
        }
    };
</script>
<script type="text/javascript">
    var dlgUpdateGroup = {
        clearUpdateGroupDialog: function () {
            $('#AppIdInUpdateGroup').combobox('clear');
            $('#GroupNameInUpdateGroup').val('');
        },

        showUpdateGroupDialog: function (row) {
            dlgUpdateGroup.clearUpdateGroupDialog();
            $('#GroupIdInUpdateGroup').val(row.id);
            $('#AppIdInUpdateGroup').combobox('reload', '/admin/ajax/combox/apps.ashx');
            $('#AppIdInUpdateGroup').combobox('select', row.app_id);
            $('#GroupNameInUpdateGroup').val(row.name);
            $('#dlgUpdateGroup').dialog('open');
        },

        updateGroup: function () {
            var validate = $('#UpdateGroup').form('validate');
            if (validate == false) {
                return false;
            }

            $.post('/admin/ajax/updateModule.ashx', $('#UpdateGroup').serialize(), function (data) {
                if (data.state == 'ok') {
                    $.messager.alert('提示', '修改成功');

                    $('#dlgUpdateGroup').dialog('close');
                    $('#menus').treegrid('reload');
                }
                else {
                    $.messager.alert('提示', '修改失败');
                }
            }, 'json');
        },

        init: function () {
            $('#btnUpdateGroup').click(dlgUpdateGroup.updateGroup);
            $('#dlgUpdateGroup').dialog({ title: '修改分组' });
        }
    };
</script>
<script type="text/javascript">
    function onDelete() {
        var row = $('#menus').treegrid('getSelected');
        if (row &&
            (row.type == 2 || row.type == 3)) {
            $.messager.confirm(
                "提示", "是否删除当前选择项?",
                function (r) {
                    if (r == true) {
                        $.post(
                            '/admin/ajax/deleteModule.ashx',
                            {
                                Id: row.id
                            },
                            function (data) {
                                if (data.state == 'ok') {
                                    $.messager.alert('提示', '删除成功');
                                    $('#menus').treegrid('reload');
                                }
                                else
                                    $.messager.alert('提示', '删除失败');
                            }, 'json');
                    }
                });
        }
        else {
            $.messager.alert('提示', '请先选择需要删除的菜单或者分组');
        }
    }
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#menus').treegrid({
            idField: 'id',
            treeField: 'name',
            rownumbers: true,
            url: '/admin/ajax/grid/getAllModules.ashx',

            columns: [[
                { field: 'id', hidden: true },
                { title: '名称', field: 'name', width: 180 },
                { title: 'URL地址', field: 'url', width: 400 },
                { title: '类型', field: 'type', formatter: function (v, r, i) { switch (v) { case 1: return '应用'; case 2: return '分组'; case 3: return '菜单'; } return ''; } }
            ]],

            toolbar: [{
                id: '_btnAddGroup',
                text: '添加分组',
                iconCls: 'icon-add',
                handler: function () {
                    dlgAddGroup.showAddGroupDialog();
                }
            }, {
                id: '_btnAddMenu',
                text: '添加菜单',
                iconCls: 'icon-add',
                handler: function () {
                    dlgAddMenu.showAddMenuDialog();
                }
            }, '-', {
                id: 'btncut',
                text: '修改',
                iconCls: 'icon-cut',
                handler: function () {
                    var row = $('#menus').treegrid('getSelected');
                    if (row &&
                        (row.type == 2 || row.type == 3)) {

                        if (row.type == 2) {
                            dlgUpdateGroup.showUpdateGroupDialog(row);
                        }

                        if (row.type == 3) {
                            dlgUpdateMenu.showUpdateMenuDialog(row);
                        }
                    }
                    else {
                        $.messager.alert('提示', '请先选择需要修改的菜单或者分组');
                    }
                }
            }, '-', {
                id: 'btnsave',
                text: '删除',
                iconCls: 'icon-remove',
                handler: function () {
                    onDelete();
                }
            }]
        });

        // 绑定各个dialog的关闭事件
        $('.close_dlg').each(function (i, e) {
            var dlg = $(e).attr('dlg');
            $(e).click(function () {
                $('#' + dlg).dialog('close');
            });      
        });


        dlgAddGroup.init();
        dlgAddMenu.init();
        dlgUpdateMenu.init();
        dlgUpdateGroup.init();
    });
</script>